<template>
	<view class="btn-back" :style="[style, { position: position }]" @tap.stop="goBack">
		<view class="flex align-center justify-center height-p-100"><u-icon name="arrow-leftward" :bold="bold" :size="size" :color="color"></u-icon></view>
	</view>
</template>

<script>
export default {
	props: {
		backImg: {
			type: String,
			default: ''
		},
		top: {
			type: Number,
			default: null
		},
		left: {
			type: Number,
			default: null
		},
		right: {
			type: Number,
			default: null
		},
		bottom: {
			type: Number,
			default: null
		},
		// 圆角度
		borderRadius: {
			type: String,
			default: '50%'
		},
		zIndex: {
			type: Number,
			default: 1999
		},
		width: {
			type: Number,
			default: 80
		},
		height: {
			type: Number,
			default: 80
		},
		backgroundColor: {
			type: String,
			default: '#808080'
		},
		opacity: {
			type: Number,
			default: 0.5
		},
		position: {
			type: String,
			default: 'absolute'
		},
		bold: {
			type: Boolean,
			default: true
		},
		size: {
			type: Number,
			default: 50
		},
		color: {
			type: String,
			default: '#ffffff'
		},
		dfBack: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			customBar: 44,
			statusBar: 20, 
			rgba: '',
			style: ''
		};
	},
	methods: {
		hexToRgba(hex, opacity) {
			return hex && hex.replace(/\s+/g, '').length === 7
				? 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
				: '';
		},
		styleInit() {
			Object.keys(this.$props).forEach(key => {
				if (['backImg', 'bold', 'size', 'color', 'opacity'].every(e => !e.includes(key)) && !this.$u.test.empty(this.$props[key])) {
					let object = {};
					let type = typeof this.$props[key];
					if (type != 'function' && ['zIndex'].every(e => !e.includes(key))) object[key] = type === 'number' ? this.$u.addUnit(this.$props[key]) : this.$props[key];
					this.style = Object.assign(this.style, object);
				}
			});
			this.rgba = this.hexToRgba(this.backgroundColor, this.opacity);
			this.style = Object.assign(this.style, { backgroundColor: this.rgba });
			let initTop = false;
			initTop = ['top', 'right', 'bottom', 'left'].every(e => !Object.keys(this.style).includes(e));
			if (initTop) {
				Object.assign(this.style, {
					top: this.statusBar + 'px',
					left: '15rpx'
				});
			}
		},
		goBack() {
			if (this.dfBack) {
				uni.navigateBack({
					delta: 1
				});
			} else this.$emit('go');
		}
	},
	mounted() {
		let self = this;
		uni.getSystemInfo({
			success: function(e) {
				let s = e.statusBarHeight;
				self.statusBar = self.top ? self.top : s;
				if (e.platform == 'android') {
					self.customBar = 48;
				} else {
					self.customBar = 44;
				}
			}
		});
		this.styleInit();
	}
};
</script>

<style lang="scss" scoped></style>
